<template>
    <div class="artDetail">
        <div class="workpageconts backTop">
            <div class="workpagecontsLeft">
                <div class="artInfoBox">
                    <h3 class="artName">{{artDetailData.artName}}</h3>
                    <Icon type="person" title="作者"></Icon>
                    <span class="author">{{artDetailData.author}}</span>
                    <Icon type="calendar" title="发布日期"></Icon>
                    <span class="writeTime">{{artDetailData.writeTime}}</span>
                    <Icon type="android-attach" title="标签"></Icon>
                    <span class="artMark">{{artDetailData.artMark}}</span>
                    <div class="artInfo">简介：{{artDetailData.info}}</div>
                </div>
                <div class="artCont">
                    {{artDetailData.artHtml}}
                </div>
            </div>
            <div class="workpagecontsRight">
                <!-- 闲聊技术页面的右侧部分 -->
                <pageContRight></pageContRight>
            </div>
            <Spin size="large" fix v-if="spinShow"></Spin>
        </div>
    </div>
</template>

<script>
import pageContRight from '../pageModule/pageContRight'
/* 文章详情(统一组件) */
export default {
  name: 'artDetail',
  components: {
      pageContRight
  },
  data: function () {
      return {
          artDetailData: '',//文章详情数据
          spinShow: true //加载层
      }
  },
  mounted () {
    this.$ajax.get("https://www.easy-mock.com/mock/5a93ac92bf782667fe4c7a32/followTest/articleDetails").then(response => {
        // success callback
        this.artDetailData = response.data.data
        this.spinShow = false //数据加载成功之后处理掉加载层的遮罩
    }, response => {
        // error callback
        alert('数据加载失败...')
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.artDetail{
	width: 100%;
	height: calc(100% - 35px);
	overflow: auto;
	margin-bottom: 35px;
}
.workpageconts{
	width: 100%;
	height: 100%;
	padding: 10px 20px;
	position: relative;
	overflow: auto;
}
.workpagecontsLeft{
	position: absolute;
	left: 20px;
	top: 10px;
	right: 380px;
}
.workpagecontsRight{
	position: absolute;
    width: 320px;
    top: 10px;
    right: 20px;
	border: 1px solid #e3e8ee;
}
.artInfoBox{text-align: left;}
.artInfoBox h3{font-size: 22px;margin: 10px 0;}
.artInfoBox i{font-size: 18px;}
.artInfoBox span{font-size: 14px;margin-right: 20px;}
.artInfo{background: #f1f1f1;padding: 10px;font-size: 14px;line-height: 20px;margin: 10px 0;}
.artCont{font-size: 16px;text-align: left;text-indent: 2em;}
</style>
